---
id: 5dc174fcf86c76b9248c6eb2
title: ステップ 1
challengeType: 0
dashedName: step-1
---

# --description--

HTML 要素には開始タグと終了タグがあり、その間に要素の中身 (コンテンツ) が入ります。

基本的な構文は次のとおりです。

```html
<openingTag>content</closingTag>
```

では最初に `h1` 要素について学びます。 `h1` 要素は見出しの要素で、ウェブページのメインの見出しに使われます。

```html
<h1>This is a main heading</h1>
```

下記の `h1` 要素のテキストを、`Hello World` から `CatPhotoApp` に変更してみましょう。プレビューで表示が変わることも確認してください。

完了したら「コードをチェック」ボタンを押して、正しいコードが書けているか確認しましょう。

# --hints--

コード内には `CatPhotoApp` というテキストが必要です。 スペルが正しいか確認してください。

```js
assert(code.match(/catphotoapp/i));
```

`h1` 要素には開始タグが必要です。 開始タグは `<elementName>` のような形式の構文です。

```js
assert(document.querySelector('h1'));
```

`h1` 要素には終了タグが必要です。 終了タグは `<` の直後に `/` があります。

```js
assert(code.match(/<\/h1\>/));
```

`h1` 要素が複数あります。 余分な `h1` 要素を削除してください。

```js
assert(document.querySelectorAll('h1').length === 1);
```

`h1` 要素のテキストは `CatPhotoApp` でなければなりません。 テキストに誤字脱字があるか、テキストが `h1` 要素の開始タグと終了タグの間に入っていない可能性があります。

```js
assert(document.querySelector('h1').innerText.toLowerCase() === 'catphotoapp');
```

ウェブページを変更するブラウザ拡張機能が使用されているようです。 拡張機能をオフにしてください。

```js
assert.isAtMost(document.querySelectorAll('script').length, 2);
assert.equal(document.querySelectorAll('style').length, 0);
assert.equal(document.querySelectorAll('link').length, 0);
```

# --seed--

## --seed-contents--

```html
<html>
  <body>
--fcc-editable-region--
    <h1>Hello World</h1>
--fcc-editable-region--
  </body>
</html>
```

